<!--
 * @Author: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @Date: 2022-02-16 16:53:19
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-06-30 08:26:45
 * @FilePath: \B2B\ebuy\src\views\product\CustomerComment\Comment\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by fengweicong 75202172+fengweicong@users.noreply.github.com, All Rights Reserved. 
-->
<template>
    <div id="productInfoComment" class="clearfix">
        <hr style="background-color:rgb(243, 239, 239);height:1px;border:none;">
        <div class="left">
            {{comment.purchaser}}
        </div>
        <div class="right">
            <div class="star">
                <i class="el-icon-star-on" v-for="item in comment.star" :key="item"></i>
            </div>
            <div class="text">
                {{comment.text}}
            </div>
             <div class="images clearfix">
                <div class="image" v-for='(url,i) in comment.picUrlArr' :key="i">
                    <img :src="url" >
                </div>
            </div>
            <div class="info">
                数量：{{comment.number}}斤
                规格：{{comment.specification}}
                <span style="margin-left:20px">{{comment.time}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'productInfoComment',
    props:{
        comment:Object
    }
}
</script>

<style lang="less" scoped>
.clearfix::after,
.clearfix::before{
    display: table;
    content: '';
    clear: both;
}
#productInfoComment{
    height: 250px;
    .left{
        float: left;
        width: 200px;
        height: 100%;
        line-height: 250px;
        text-align: center;
    }
    .right{
        float: left;
        width: 550px;
        min-height: 100%;
        .star{
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            .el-icon-star-on{
                color: gold;
            }
        }
        .text{
            width: 100%;
            line-height: 30px;
        }
        .images{
            display: block;
            .image{
                margin:10px 20px 10px 0;
                width: 90px;
                height: 90px;
                float: left;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .info{
            float: right;
            line-height: 40px;
            color: #C0C4CC;
        }
    }
}

</style>